<template>
	<!--pages/login/login.wxml-->

	<view class="container">
		<view class="wrapper">
			<uni-notice-bar scrollable single text="本项目采用网易云接口,使用网易云手机号码登录即可" color="#02d15f"
				background-color="#111111"></uni-notice-bar>
			<view class="left-top-sign">LOGIN</view>
			<view class="input-content">
				<view class="input-item">
					<text class="tit">手机号码</text>
					<input type="text" placeholder="请输入手机号码" v-model="phone" />
				</view>
				<view class="input-item">
					<text class="tit">验证码</text>
					<input type="password" placeholder="请输入验证码" v-model="captcha" />
				</view>
			</view>
			<button class="confirm-btn1" @tap="getphonecode">获取验证码</button>
			<button class="confirm-btn" @tap="login">登录</button>
			<view class="forget-section">
				忘记密码?
			</view>
		</view>
		<view class="register-section">
			还没有账号?
			<text>马上注册</text>
		</view>
	</view>


</template>

<script>
	import newequest from '@/common/api/newrequest.js'
	export default {
		data() {
			return {
				phone: '',
				captcha: '',
				cookie: ''
			}

		},
		onLoad() {},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '/pages/index/index'
			})
		},
		methods: {
		async test(){
				let result = await newequest(`/recommend/resource`)
				console.log(result)
			},
			getphonecode() {
				if(phone===""){
					uni.showToast({
						title:'请输入手机号码'
					})
					return
				}
				this.getphonecode()
			},
			login() {
				this.getlogin()
			},
			async getphonecode() {
				let phoneresult = await newequest(`/captcha/sent`,{phone:this.phone})
				if(phoneresult.code==200){
					uni.showToast({
					    title: '获取验证码成功',
					  })
				}
			},
			async getlogin(){
				let loginresult = await newequest('/login/cellphone',{phone:this.phone,password:this.captcha,isLogin:true})
				  if (loginresult.code == 200) {
				        uni.showToast({
				            title: '登录成功',
				          })
				            uni.setStorageSync('userInfo', JSON.stringify(loginresult.profile))
				            uni.reLaunch({
				                url: '/pages/index/index',
				            })
							uni.getStorage({
								key:'userInfo',
								success: (res) => {
									console.log(res)
								}
							})
				     }else if(loginresult.code == 400){
				        uni.showToast({
				            title: '手机号错误',
				            icon:'none'
				          })
				     }else if(loginresult.code == 502){
				        uni.showToast({
				            title: '验证码错误',
				            icon:'none'
				          })
				     }else{
				        uni.showToast({
				            title: '登录失败，请重新登陆',
				            icon:'none'
				          })
				     }
			}
			
		}
	}
</script>

<style>
	/* pages/login/login.wxss */
	/* pages/login/login.wxss */
	.wrapper {
		position: relative;
		z-index: 90;
		padding-bottom: 40rpx;
	}

	.left-top-sign {
		text-align: center;
		font-size: 120rpx;
		color: #02d15f;
		position: relative;
		left: -16rpx;
	}

	.welcome {
		position: relative;
		left: 50rpx;
		top: -20rpx;
		font-size: 46rpx;
		color: #02d15f;
	}


	.input-content {
		padding: 0 60rpx;
	}

	.input-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		padding: 0 30rpx;
		background: #f8f6fc;
		height: 120rpx;
		border-radius: 4px;
		margin-bottom: 50rpx;

	}

	.input-item:last-child {
		margin-bottom: 0;
	}

	.input-item .tit {
		height: 50rpx;
		line-height: 56rpx;
		font-size: 30rpx;
		color: #000000;
	}

	.input-item input {
		height: 60rpx;
		font-size: 30rpx;
		color: #303133;
		width: 100%;
	}

	.confirm-btn {
		width: 630rpx !important;
		height: 76rpx;
		line-height: 76rpx;
		border-radius: 50rpx;
		margin-top: 70rpx;
		background: #02d15f;
		color: #fff;
		font-size: 32rpx;
		padding: 0;
	}

	.confirm-btn1 {
		width: 630rpx !important;
		height: 76rpx;
		line-height: 76rpx;
		border-radius: 50rpx;
		margin-top: 70rpx;
		background: #bfbfbf;
		color: #fff;
		font-size: 32rpx;
		padding: 0;
	}

	.confirm-btn2:after {
		border-radius: 100px;
	}

	.forget-section {
		font-size: 28rpx;
		color: #4399fc;
		text-align: center;
		margin-top: 40rpx;
	}

	.register-section {
		position: absolute;
		left: 0;
		bottom: 50rpx;
		width: 100%;
		font-size: 28rpx;
		color: #606266;
		text-align: center;

	}

	.register-section text {
		color: #4399fc;
		margin-left: 10rpx;
	}
</style>
